<template>
	<view class="uni-primary">
		<view class="top_box">
			<view class="top_search">
			</view>
			<view class="bannar">
				<!-- 轮播图 -->
				<swiper class="swiper" circular indicator-dots indicator-color="#fff" indicator-active-color="#8be627"
					autoplay :interval="2000">
					<swiper-item v-for="item in swiperImages" :key="item.id">
						<image :src="item.imageSrc" class="swiper-images" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 海报 -->
			<view class="pic">
				<image src="/static/pic/pic_1.png"></image>
			</view>
			<!-- 商品分类 -->
			<view class="goods">
				<uni-grid :column="4" class="goods-grid" :showBorder="false" :highlight="false">
					<uni-grid-item v-for="(item, index) in goods" :key="item.id" :index="item.id"
						class="goods-grid-item">
						<view class="grid-item-box" style="background-color: #fff;" @click="handleToGoodsClass(item)">
							<image :src="item.imageSrc" mode=""></image>
							<text class="text">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- 商品推荐 -->
			<view class="goods_recommend">
				<uni-icons type="fire-filled" size="16" color="#ff200c"></uni-icons>
				<text>商品推荐</text>
				<!-- 商品 -->
				<goodCards :goods-info="goodsRecommendInfo" @reGerGoodsInfo="goodsRecommend"></goodCards>
			</view>
		</view>
	</view>
</template>

<script>
	import homeApi from '../../api/home/index.js'
	import goodCards from '../goods/goodCards.vue'
	export default {
		data() {
			return {
				swiperImages: [],
				goods: [],
				goodsRecommendInfo: [],
				isAddCart: false
			}
		},
		components: {
			goodCards
		},
		onShow() {
			this.getSwiperImages()
			this.goodsClassification()
			this.goodsRecommend()
		},
		methods: {
			async getSwiperImages() {
				let res = await homeApi.getSwiperImages()
				if (res.code == 200) {
					this.swiperImages = res.list || []
				}
			},
			async goodsClassification() {
				let res = await homeApi.goodsClassification()
				if (res.code == 200) {
					this.goods = res.list || []
				}
			},
			async goodsRecommend() {
				let res = await homeApi.goodsRecommend()
				if (res.code == 200) {
					this.goodsRecommendInfo = res.list || []
				}
			},
			handleToGoodsClass(item) {
				uni.switchTab({
					url: '/pages/all-application/all-application'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	text {
		color: $uni-black;
	}

	.top_box {
		height: 400rpx;
		width: 750rpx;
		background-color: $uni-primary;

		.top_search {
			height: 100rpx;
		}

		.bannar {
			height: 300rpx;

			.swiper {
				height: 320rpx;
				text-align: center;

				.swiper-images {
					width: 700rpx;
					height: 300rpx;
					border-radius: 10px;
				}
			}
		}
	}

	.pic {
		width: 750rpx;
		height: 200rpx;

		image {
			width: 750rpx;
			height: 200rpx;
		}
	}

	.goods {
		.goods-grid {
			background-color: #fff;
			text-align: center;

			.goods-grid-item {
				.uni-grid-item__box {
					height: 80px;
					background-color: yellow;
				}

				image {
					width: 120rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				text {
					display: inline-block;
				}
			}
		}
	}

	.goods_recommend {
		text {
			font-size: 14rpx;
			color: #ff200c;
		}

		padding-bottom: 100rpx;
	}
</style>